<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花里胡哨的页面</title>
    <style>
        /* 整体样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
            overflow: hidden;
        }

        /* 标题样式 */
        h1 {
            text-align: center;
            font-size: 4rem;
            text-shadow: 3px 3px 0 #ff6f61, 6px 6px 0 #ffcc00, 9px 9px 0 #00bcd4;
            animation: float 3s ease-in-out infinite;
        }

        /* 浮动动画 */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* 按钮样式 */
        .button {
            display: inline-block;
            padding: 15px 30px;
            font-size: 1.5rem;
            color: white;
            background: linear-gradient(45deg, #ff6f61, #ffcc00);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(255, 111, 97, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .button:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 30px rgba(255, 204, 0, 0.6);
        }

        /* 卡片样式 */
        .card {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            margin: 20px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: rotate(5deg) scale(1.05);
        }

        /* 背景动画 */
        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 星星效果 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: transparent;
            overflow: hidden;
        }

        .star {
            position: absolute;
            background: white;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="background-animation"></div>
    <div class="stars">
        <!-- 星星动态生成 -->
    </div>

    <h1>欢迎来到花里胡哨的世界！</h1>
    <div style="text-align: center;">
        <button class="button" onclick="showMessage()">点击我！</button>
    </div>
    <div style="display: flex; justify-content: center;">
        <div class="card">
            <h2>卡片 1</h2>
            <p>这是一个花里胡哨的卡片！</p>
        </div>
        <div class="card">
            <h2>卡片 2</h2>
            <p>这个卡片也很花哨！</p>
        </div>
    </div>

    <script>
        // 动态生成星星
        function createStars() {
            const starsContainer = document.querySelector('.stars');
            for (let i = 0; i < 100; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                star.style.top = `${Math.random() * 100}%`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.animationDelay = `${Math.random() * 3}s`;
                starsContainer.appendChild(star);
            }
        }

        // 按钮点击事件
        function showMessage() {
            alert('你点击了一个花里胡哨的按钮！');
        }

        // 初始化星星
        createStars();
    </script>
</body>
</html>